<template>
  <el-dialog
    v-model="dialogVisible"
    title="请选择支付方式"
    width="500px"
    :before-close="handleClose"
    destroy-on-close
    center
  >
    <div class="payment-dialog">
      <!-- 支付金额展示 -->
      <div class="payment-amount text-center mb-6">
        <p class="text-gray-500 mb-2">订单金额</p>
        <p class="text-3xl font-bold text-red-600">¥{{ formatPrice(amount) }}</p>
      </div>
      
      <!-- 支付选项 -->
      <el-tabs v-model="activePayment" class="payment-tabs">
        <el-tab-pane name="wechat">
          <template #label>
            <div class="payment-tab-label flex items-center">
              <div class="payment-icon bg-green-50 text-green-600 p-2 rounded-full mr-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M8.69,13.07a0.67,0.67,0,1,1,.67-0.67A0.67,0.67,0,0,1,8.69,13.07Zm5.6-2.7a0.67,0.67,0,1,0-.67.67A0.67,0.67,0,0,0,14.29,10.37ZM9.61,16.7a0.81,0.81,0,1,0,.81-0.81A0.81,0.81,0,0,0,9.61,16.7Zm4.77,0a0.81,0.81,0,1,0,.8-0.81A0.81,0.81,0,0,0,14.38,16.7ZM16.84,5H7.23a6.45,6.45,0,0,0-6.7,6.94A6.83,6.83,0,0,0,5,18.59l-0.94,3.5,3.28-1.64a9.6,9.6,0,0,0,1.97.27,7.15,7.15,0,0,0,.91-0.06,5.88,5.88,0,0,0,5.39-5.07A7.07,7.07,0,0,1,10,9.21a10.2,10.2,0,0,1,6.08.38h0a8.12,8.12,0,0,0,.69-3.07A5.91,5.91,0,0,0,16.84,5Zm6.62,5.71a6.61,6.61,0,0,0-3.1-6A7.11,7.11,0,0,0,17,4.2a0.26,0.26,0,0,0-.26.7,8.72,8.72,0,0,0-.69,3.75A10.82,10.82,0,0,0,12.73,7.5a9.19,9.19,0,0,0-3.39.27,0.27,0.27,0,0,0-.17.13,5.73,5.73,0,0,0-.43,2.21,6.35,6.35,0,0,0,6.15,6.29,7.87,7.87,0,0,0,1.7-.23c0.07,0,.15,0,0.15.12h0c-0.32,1.67-1.49,2.62-3.18,2.62H13.47a1.07,1.07,0,0,0-.31,0,8.19,8.19,0,0,1-2-.6c-0.07,0-.14-0.07-0.21,0L9.12,19a0.21,0.21,0,0,0-.07.25l0.81,2.66a0.21,0.21,0,0,0,.18.14,6.5,6.5,0,0,0,2,.31,6.1,6.1,0,0,0,4.25-1.75,9,9,0,0,0,2.89-5.62,5.5,5.5,0,0,0,.23-1.17A6.1,6.1,0,0,0,23.46,10.71Z"/>
                </svg>
              </div>
              <span>微信支付</span>
            </div>
          </template>
          <div class="payment-content flex flex-col items-center pt-4">
            <div class="qrcode-wrapper bg-white p-3 border border-gray-200 rounded-lg shadow-sm">
              <img src="https://via.placeholder.com/180x180/f0f0f0/4CAF50?text=WeChat+Pay" alt="微信支付二维码" class="w-44 h-44">
            </div>
            <p class="text-gray-500 mt-4">请使用微信扫一扫</p>
            <p class="text-green-600 mt-2">
              <span class="countdown">{{ countdown }}</span> 秒后二维码过期
            </p>
          </div>
        </el-tab-pane>
        
        <el-tab-pane name="alipay">
          <template #label>
            <div class="payment-tab-label flex items-center">
              <div class="payment-icon bg-blue-50 text-blue-600 p-2 rounded-full mr-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M21.67,11.88c-0.73-.32-1.67-0.78-2.69-1.23-1.5.95-3.45,2.09-5.16,2.09a10.73,10.73,0,0,1-3-.41A8.44,8.44,0,0,1,8.76,10.8a3.5,3.5,0,0,1-.52-1.2,6.91,6.91,0,0,0,2.61.52A10.66,10.66,0,0,0,16,8.91L16.79,7.5H10.44A15.28,15.28,0,0,0,9.23,4.83h4.67V3.27H8.15v-1H6.59v1H2V4.83H6.59v1.3H3.27V7.7h6.14c-0.28.58-.6,1.18-0.92,1.73A13.77,13.77,0,0,1,3.6,10.79a9.7,9.7,0,0,1,1.86-5.76,10,10,0,0,1,15.18-1.5A10,10,0,0,1,23,12.27C23,18.5,18,21,12,21a9.53,9.53,0,0,1-8.24-4.32L1.49,18.36A11.92,11.92,0,0,0,12,23,11.52,11.52,0,0,0,22,15.61,11.89,11.89,0,0,0,21.67,11.88Z"/>
                </svg>
              </div>
              <span>支付宝支付</span>
            </div>
          </template>
          <div class="payment-content flex flex-col items-center pt-4">
            <div class="qrcode-wrapper bg-white p-3 border border-gray-200 rounded-lg shadow-sm">
              <img src="https://via.placeholder.com/180x180/f0f0f0/1677FF?text=Alipay" alt="支付宝支付二维码" class="w-44 h-44">
            </div>
            <p class="text-gray-500 mt-4">请使用支付宝扫一扫</p>
            <p class="text-blue-600 mt-2">
              <span class="countdown">{{ countdown }}</span> 秒后二维码过期
            </p>
          </div>
        </el-tab-pane>
        
        <el-tab-pane name="unionpay">
          <template #label>
            <div class="payment-tab-label flex items-center">
              <div class="payment-icon bg-red-50 text-red-600 p-2 rounded-full mr-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M22,8H2A1,1,0,0,0,1,9V19a1,1,0,0,0,1,1H22a1,1,0,0,0,1-1V9A1,1,0,0,0,22,8ZM7,16H4v3H7V16Zm4,0H8v3h3V16Zm4,0H12v3h3V16Zm4,0H16v3h3V16ZM22,4H2A1,1,0,0,0,1,5V7a1,1,0,0,0,1,1H22a1,1,0,0,0,1-1V5A1,1,0,0,0,22,4Z"/>
                </svg>
              </div>
              <span>银联支付</span>
            </div>
          </template>
          <div class="payment-content flex flex-col items-center pt-4">
            <div class="qrcode-wrapper bg-white p-3 border border-gray-200 rounded-lg shadow-sm">
              <img src="https://via.placeholder.com/180x180/f0f0f0/E21C21?text=UnionPay" alt="银联支付二维码" class="w-44 h-44">
            </div>
            <p class="text-gray-500 mt-4">请使用银行APP扫一扫</p>
            <p class="text-red-600 mt-2">
              <span class="countdown">{{ countdown }}</span> 秒后二维码过期
            </p>
          </div>
        </el-tab-pane>
      </el-tabs>
      
      <!-- 支付说明 -->
      <div class="payment-tips bg-gray-50 p-4 mt-6 rounded-lg text-sm text-gray-500">
        <p class="mb-2 font-medium">支付说明：</p>
        <ol class="list-decimal pl-5">
          <li>请在 <span class="font-medium text-red-500">{{ countdown }}</span> 秒内完成支付</li>
          <li>完成支付后，将自动跳转到订单页面</li>
          <li>如果遇到问题，请联系客服热线</li>
        </ol>
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer flex justify-between items-center">
        <el-button @click="cancel">取消支付</el-button>
        <div class="flex space-x-2">
          <el-button type="success" plain @click="refreshQRCode">刷新二维码</el-button>
          <el-button type="primary" @click="checkPaymentStatus">支付完成</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, onBeforeUnmount, defineProps, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  orderNumber: {
    type: String,
    default: ''
  },
  amount: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['update:visible', 'payment-success', 'payment-cancel'])

// 控制对话框显示
const dialogVisible = ref(props.visible)

// 监听外部visible变化
watch(() => props.visible, (newVal) => {
  dialogVisible.value = newVal
  if (newVal) {
    startCountdown()
  }
})

// 监听内部dialogVisible变化
watch(() => dialogVisible.value, (newVal) => {
  emit('update:visible', newVal)
})

// 当前选择的支付方式
const activePayment = ref('wechat')

// 倒计时设置
const countdown = ref(300) // 5分钟
let countdownTimer: number | null = null

// 启动倒计时
const startCountdown = () => {
  countdown.value = 300
  if (countdownTimer) {
    clearInterval(countdownTimer)
  }
  
  countdownTimer = window.setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(countdownTimer as number)
      ElMessage.warning('支付二维码已过期，请刷新后重试')
    }
  }, 1000) as unknown as number
}

// 刷新二维码
const refreshQRCode = () => {
  ElMessage.success('二维码已刷新')
  startCountdown()
}

// 检查支付状态
const checkPaymentStatus = () => {
  // 模拟支付成功
  ElMessage.success('支付成功')
  dialogVisible.value = false
  emit('payment-success', {
    orderNumber: props.orderNumber,
    paymentMethod: activePayment.value
  })
}

// 取消支付
const cancel = () => {
  ElMessage.info('已取消支付')
  dialogVisible.value = false
  emit('payment-cancel', props.orderNumber)
}

// 处理关闭
const handleClose = () => {
  ElMessage.info('已取消支付')
  dialogVisible.value = false
  emit('payment-cancel', props.orderNumber)
}

// 格式化价格
const formatPrice = (price: number) => {
  return price.toFixed(2)
}

// 组件挂载和卸载
onMounted(() => {
  if (props.visible) {
    startCountdown()
  }
})

onBeforeUnmount(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer)
  }
})
</script>

<style scoped>
.payment-dialog {
  padding: 10px;
}

.payment-tabs :deep(.el-tabs__nav) {
  width: 100%;
  display: flex;
}

.payment-tabs :deep(.el-tabs__item) {
  flex: 1;
  text-align: center;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-tabs :deep(.el-tabs__active-bar) {
  height: 3px;
  border-radius: 3px;
}

.payment-tabs :deep(.el-tabs__item.is-active) {
  font-weight: bold;
}

.qrcode-wrapper {
  position: relative;
  transition: transform 0.3s;
}

.qrcode-wrapper:hover {
  transform: scale(1.02);
}

.countdown {
  font-weight: bold;
}

.payment-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.payment-tab-label {
  width: 100%;
  justify-content: center;
}

/* 微信支付样式 */
.payment-tabs :deep(.el-tabs__item.is-active[aria-controls="pane-wechat"]) {
  color: #4CAF50;
}

.payment-tabs :deep(.el-tabs__active-bar[style*="translate3d(0px"]) {
  background-color: #4CAF50;
}

/* 支付宝支付样式 */
.payment-tabs :deep(.el-tabs__item.is-active[aria-controls="pane-alipay"]) {
  color: #1677FF;
}

.payment-tabs :deep(.el-tabs__active-bar[style*="translate3d(166px"]) {
  background-color: #1677FF;
}

/* 银联支付样式 */
.payment-tabs :deep(.el-tabs__item.is-active[aria-controls="pane-unionpay"]) {
  color: #E21C21;
}

.payment-tabs :deep(.el-tabs__active-bar[style*="translate3d(332px"]) {
  background-color: #E21C21;
}
</style> 